<template>
  <!-- 书写html结构 -->
  <div>
    <!-- 导航栏 -->
    <van-nav-bar title="平台消息" left-text="返回" left-arrow @click-left="jumpAbout('about', icode)" />

    <div v-for="item in announcement" @click="jump('message')">
      <van-row type="flex" style="margin: 10px 15px 5px 0px;text-align:left; text-indent: 1em">
          <van-col span="24" style="color: rgb(56, 56, 56); font-size: 20px;" ><b>{{item.title}}</b></van-col>
      </van-row>
      <van-row>
          <template slot-scope="scope">
            <el-image
              style=" height: 190px;width: 90%;align-content: center; border-radius: 10px;"
              :src=item.image></el-image>
          </template>
      </van-row>
      <var-row>{{item.createTime}}</var-row>
      <div style="margin-left: 5%;margin-top: 10px; width: 90%;height: 1px; background-color: #999898;"></div>
    </div>
  </div>
</template>

<script>
//书写组件配置项目 相当于写js代码的地方
//要求template必须有且只有一个根元素，如果有两个就不知道绑定那个
export default {
  data() {
    //存放使用的所有属性数据
    return {
      //方便编写表单校验
      announcement:{},
    };
  },
  created() {
    this.loadData();
    //alert("this.orderList:"+this.orderList.length)
  },
  methods: {
    loadData() {
      //不是直接使用axios 而是使用$http
      //baseURL="http://localhost:8080"
      var _this = this;
      _this.$http
        .get(
          "/tbAnnouncement/queryAll")
        .then(function (response) {
          console.log(response);
          if (response.data.code == 200) {
            //this不可以直接使用 代表的是axios对象
            _this.announcement = response.data.data;
            // alert(JSON.stringify(_this.personal));
          }
        })
        .catch(function (error) {
          console.log(error);
        });
    },
    jumpAbout(uri, code) {
      code = this.$route.query.icode;
      this.$router.push({ name: uri, query: { code: code } });
    },
    //  方法事件处理
    jump(uri) {
      this.$router.push(
        uri,
        () => { },
        () => { }
      );
    },
  },
  components: {
    // 组件注册的地方 相当于pom文件
  },
};
</script>

<style>
</style>
